<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名" prop="name">
            <el-input v-model.trim="pram.name" maxlength="10" placeholder="姓名" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="民族" prop="nation">
            <el-select v-model="pram.nation" placeholder="请选择民族">
              <el-option
                v-for="item in nationList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              v-model="pram.birthday"
              type="date"
              :default-value="new Date().setFullYear(new Date().getFullYear()-18)"
              :picker-options="{disabledDate}"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              placeholder="选择出生日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" prop="gender">
            <el-radio v-model="pram.gender" :label="1">男</el-radio>
            <el-radio v-model="pram.gender" :label="2">女</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="籍贯" prop="native_place">
            <el-input v-model.trim="pram.native_place" maxlength="10" placeholder="请输入籍贯" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="政治面貌" prop="politics">
            <el-select v-model="pram.politics" placeholder="请选择政治面貌">
              <el-option
                v-for="item in politicsList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学历" prop="education">
            <el-select v-model="pram.education" placeholder="请选择学历">
              <el-option
                v-for="item in educationList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学位" prop="degree">
            <el-select v-model="pram.degree" placeholder="请选择学位">
              <el-option
                v-for="item in degreeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="职称" prop="titles">
            <el-cascader v-model="pram.titles" filterable clearable :options="titlesList" :props="{value:'id',label:'name',children:'child'}" :show-all-levels="false" placeholder="请选择职称信息"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工作单位职务" prop="job_text">
            <el-input v-model.trim="pram.job_text" maxlength="30" placeholder="工作单位及职务" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="从事行业" prop="industry">
            <el-input v-model.trim="pram.industry" maxlength="30" placeholder="从事行业(专业)" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系手机" prop="phone">
            <el-input v-model.trim="pram.phone" maxlength="11" placeholder="联系手机" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="技术带头人" prop="is_technology_leader">
            <el-radio v-model="pram.is_technology_leader" :label="1">是</el-radio>
            <el-radio v-model="pram.is_technology_leader" :label="2">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="推荐单位" prop="reference">
            <el-input v-model.trim="pram.reference" maxlength="30" placeholder="推荐单位" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="毕业时间" prop="graduation_time">
            <el-date-picker
              v-model="pram.graduation_time"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              placeholder="请选择毕业时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="层次" prop="level">
            <el-select v-model="pram.level" placeholder="请选择层次">
              <el-option
                v-for="item in levelList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="现专技职务时间" prop="technical_position_time">
            <el-date-picker
              style="width: 100%"
              v-model="pram.technical_position_time"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              placeholder="请选择现专业技术职务时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单位类别" prop="unit_type">
            <el-select v-model="pram.unit_type" placeholder="请选择单位类别">
              <el-option
                v-for="item in unitTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单位性质" prop="unit_nature">
            <el-select v-model="pram.unit_nature" placeholder="请选择单位性质">
              <el-option
                v-for="item in unitNatureList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="办公电话" prop="office_phone">
            <el-input v-model.trim="pram.office_phone" maxlength="11" placeholder="办公电话" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model.trim="pram.email" maxlength="30" placeholder="邮箱" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人才卡类别" prop="card_category">
            <el-input v-model.trim="pram.card_category" maxlength="10" placeholder="人才卡类别" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人才引进单位" prop="introduce_unit">
            <el-input v-model.trim="pram.introduce_unit" maxlength="30" placeholder="人才引进单位" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="人才引进年度" prop="introduce_year">
            <el-input v-model.trim="pram.introduce_year" maxlength="20" placeholder="人才引进年度(批次)" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="引进地区" prop="introduce_area">
            <el-select v-model="pram.introduce_area" placeholder="请选择引进地区">
              <el-option
                v-for="item in areaList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否应届" prop="is_current">
            <el-radio v-model="pram.is_current" :label="1">是</el-radio>
            <el-radio v-model="pram.is_current" :label="2">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否留学生" prop="is_abroad">
            <el-radio v-model="pram.is_abroad" :label="1">是</el-radio>
            <el-radio v-model="pram.is_abroad" :label="2">否</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="是否前20大学" prop="is_top_20">
            <el-radio v-model="pram.is_top_20" :label="1">是</el-radio>
            <el-radio v-model="pram.is_top_20" :label="2">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否双一流" prop="is_double_top">
            <el-radio v-model="pram.is_double_top" :label="1">是</el-radio>
            <el-radio v-model="pram.is_double_top" :label="2">否</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              :autosize="{minRows:5,maxRows:5}"
              maxlength="500"
              placeholder="备注"
              resize="none"
              size="small"
              clearable
              v-model="pram.remark">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入选人才计划" prop="selected">
            <el-input
              type="textarea"
              :autosize="{minRows:5,maxRows:5}"
              maxlength="500"
              placeholder="入选各类人才计划工程情况"
              resize="none"
              size="small"
              clearable
              v-model="pram.selected">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="引进相关专业" prop="related_profession">
            <el-select style="width: 100%" multiple v-model="pram.related_profession" placeholder="请选择引进相关专业">
              <el-option
                v-for="item in relatedProfessionList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="技术领域" prop="technology">
            <el-select style="width: 100%" v-model="pram.technology" placeholder="请选择技术领域">
              <el-option
                v-for="item in technologyList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人才类别" prop="talent_category">
            <el-select style="width: 100%" multiple v-model="pram.talent_category" placeholder="请选择人才类别">
              <el-option
                v-for="item in talentCategoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="状态">
        <el-switch v-model="pram.status" :active-value="1" :inactive-value="0"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')">{{ isCreate === 0 ? '确定' : '更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {Debounce} from '@/utils/validate'
import {getEditData} from "@/utils/utils";
import {saveTalent} from "@/api/talent";

export default {
  // name: "edit"
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return {rules: []}
      }
    },
    nation: {
      type: Array
    },
    politics: {
      type: Array
    },
    education:{
      type:Array
    },
    degree:{
      type:Array
    },
    titles:{
      type:Array
    },
    level:{
      type:Array
    },
    unitType:{
      type:Array
    },
    unitNature:{
      type:Array
    },
    area:{
      type:Array
    },
    relatedProfession:{
      type:Array
    },
    talentCategory:{
      type:Array
    },
    technology:{
      type:Array
    }
  },
  data() {
    return {
      constants: this.$constants,
      pram: {
        name:'',
        gender:1,
        birthday:'',
        nation:null,
        native_place:'',
        politics:null,
        education:null,
        degree:null,
        titles:[],
        job_text:'',
        industry:'',
        phone:'',
        is_technology_leader:2,
        reference:'',
        graduation_time:'',
        level:null,
        unit_type:null,
        unit_nature:null,
        technical_position_time:'',
        office_phone:'',
        technology:null,
        email:'',
        card_category:'',
        introduce_unit:'',
        introduce_year:'',
        introduce_area:null,
        is_current:2,
        is_abroad:2,
        is_top_20:2,
        is_double_top:2,
        remark:'',
        selected:'',
        related_profession:[],
        talent_category:[],
        status: 1,
        id: 0,
      },
      nationList: [],
      politicsList:[],
      educationList:[],
      degreeList:[],
      titlesList:[],
      levelList:[],
      unitTypeList:[],
      unitNatureList:[],
      areaList:[],
      relatedProfessionList:[],
      talentCategoryList:[],
      technologyList:[],
      rules: {
        name: [{required: true, message: '请输入姓名', trigger: ['blur', 'change']}],
        nation: [{required: true, message: '请选择民族', trigger: ['blur', 'change']}],
        birthday: [{required: true, message: '请选择出生日期', trigger: ['blur', 'change']}],
        gender: [{required: true, message: '请选择性别', trigger: ['blur', 'change']}],
        native_place: [{required: true, message: '请输入籍贯', trigger: ['blur', 'change']}],
        politics: [{required: true, message: '请选择政治面貌', trigger: ['blur', 'change']}],
        education: [{required: true, message: '请选择学历', trigger: ['blur', 'change']}]
      },
    }
  },
  mounted() {
    this.initEditData()
  },
  watch:{
    nation:{
      immediate:true,
      handler(v){
        this.nationList=v;
      }
    },
    politics:{
      immediate:true,
      handler(v){
        this.politicsList=v;
      }
    },
    education:{
      immediate:true,
      handler(v){
        this.educationList=v;
      }
    },
    degree:{
      immediate:true,
      handler(v){
        this.degreeList=v;
      }
    },
    titles:{
      immediate:true,
      handler(v){
        this.titlesList=v;
      }
    },
    level:{
      immediate:true,
      handler(v){
        this.levelList=v;
      }
    },
    unitNature:{
      immediate:true,
      handler(v){
        this.unitNatureList=v;
      }
    },
    unitType:{
      immediate:true,
      handler(v){
        this.unitTypeList=v;
      }
    },
    area:{
      immediate:true,
      handler(v){
        this.areaList=v;
      }
    },
    relatedProfession:{
      immediate:true,
      handler(v){
        this.relatedProfessionList=v;
      }
    },
    talentCategory:{
      immediate:true,
      handler(v){
        this.talentCategoryList=v;
      }
    },
    technology:{
      immediate:true,
      handler(v){
        this.technologyList=v;
      }
    }
  },
  methods: {
    disabledDate(time){
      const date=new Date();
      date.setFullYear(date.getFullYear()-18);
      return time.getTime()>date.getTime();
    },
    close() {
      this.$emit('hideEditDialog')
    },
    initEditData() {
      if (this.isCreate !== 1) return //编辑
      this.pram =
        {
          ...getEditData(Object.keys(this.pram), this.editData)
        };
    },
    handlerSubmit: Debounce(function (form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        saveTalent(this.pram).then(data => {
          this.$message.success('保存成功')
          this.$emit('hideEditDialog')
        })
      })
    }),
  }
}
</script>

<style scoped>

</style>
